<template>
	<view class="order-detail">
		<common-navbar title="我的订单"></common-navbar>
		<view class="top-bg" v-if="orderDetail" :class="orderStatus.orderStyle">
			<!-- 			<u-image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/305c1e23-649f-4b57-9231-09c767700a35.png" width="100%" height="360"></u-image> -->
			<view class="top-title">
				{{orderStatus.orderTitle}}
			</view>
			<view class="top-prompt">
				<template v-if="orderDetail.pay_status == 1">交易将在<u-count-down color="#ffffff" separator-color="#ffffff"
						separator='zh' separator-size="22" font-size="22" :timestamp="Number(orderDetail.excess_time)"
						@end="countDownEnd"></u-count-down>后关闭，请及时付款！</template>
				<template v-else>{{orderStatus.tips}}</template>
			</view>
			<view class="order-detail-content-container">
				<view class="goods-info-container">
					<view class="goods-info-left">
						<view class="order-detail-item">
							<view class="order-detail-item-label" style="margin-right: 24rpx;">
								商品名称：
							</view>
							<view class="order-detail-item-value"
								style="font-size: 32rpx;font-weight: 700;color: #333333;">
								{{orderDetail.title}}
							</view>
						</view>
						<view class="order-detail-item">
							<view class="order-detail-item-label" style="margin-right: 24rpx;">
								商品价格：
							</view>
							<!-- 		<view class="order-detail-item-value" style="color: #999999;">
								快速咨询
							</view> -->
							<view class="goods-info-right">
								￥{{orderDetail.price}}
							</view>
						</view>
					</view>

				</view>
				<view class="order-detail-container">
					<view class="order-detail-item">
						<view class="order-detail-item-label" style="margin-right: 28rpx;">
							交易收款方：
						</view>
						<view class="order-detail-item-value">
							{{orderDetail.remittee}}
						</view>
					</view>
					<view class="order-detail-item">
						<view class="order-detail-item-label">
							交易单号：
						</view>
						<view class="order-detail-item-value">
							{{orderDetail.task_code}}
						</view>
					</view>
					<!-- 			<view class="order-detail-item">
						<view class="order-detail-item-label">
							商户单号：
						</view>
						<view class="order-detail-item-value">
							3661965465123123
						</view>
					</view> -->
					<view class="order-detail-item">
						<view class="order-detail-item-label">
							创建时间：
						</view>
						<view class="order-detail-item-value">
							{{orderDetail.created_at}}
						</view>
					</view>
					<view class="order-detail-item">
						<view class="order-detail-item-label">
							付款时间：
						</view>
						<view class="order-detail-item-value">
							{{orderDetail.pay_time?orderDetail.pay_time:'未付款'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-btn" @click="onClick" :class="orderStatus.orderStyle" v-if="orderDetail">
			{{orderStatus.orderBtnText}}
		</view>
		<payBar ref="payBar" :isToOrderDetail="false" :isCheckFollowStatus="false" />
	</view>
</template>

<script>
	import {
		getMixinByOrderType
	} from "./orderMixin.js";
	export default {
		mixins: [getMixinByOrderType()],
		async onLoad(options) {
			await this.$loginStatus;
			this.taskCode = options.taskCode;
			// this.orderType = taskCode.substr(0,2);
			this.getOrderDetail();
		},
		mounted() {
			console.log(this)
		},
		data() {
			return {
				orderDetail: null,
				taskCode: '',
				restUrl: '',
			}
		},
		computed: {
			orderType() {
				return this.taskCode.substr(0, 2);
			},
		},
		methods: {
			countDownEnd() {
				this.$u.route({
					url: '/pages/order/order',
					type: 'redirectTo'
				})
			},
			onClick() {
				console.log('点击了按钮>>>>>>>>>>>')
				this.orderStatus.orderBtnClick();
			},
			async payAgain() {
				console.log('再次支付>>>>>>>>>>>>>')
				const pay_type = await this.getPayType();
				
				const {
					task_code,
					price,
					excess_time,
				} = (await this.$u.post(this.restUrl, {
					task_code: this.taskCode,
				})).data
				if (pay_type == 1) {
					const options = {
						taskCode: task_code,
						price,
						countDown: excess_time,
						again_pay: pay_type,
					}
					await this.$refs.payBar.pay(options);
				} else if (pay_type == 2) {
					const res = await this.$u.post(this.$restUrl.getWXPayOptions, {
						task_code,
						amount: price,
						again_pay: pay_type,
					})
					
					await this.$wx.WXPay({
						...res.data,
						task_code: task_code
					});
				}else if(pay_type == 3){
					const options ={
						task_code,
						amount:price,
						again_pay:pay_type
					}
					await this.$u.post(this.$restUrl.balancePayment, options)
				}
				console.log('支付成功')
				this.getOrderDetail();
			},
			comeback() {
				uni.navigateBack();
			},
			renewal() {
				this.$u.route({
					url: '/pages/vip/vip',
					type: 'redirectTo'
				})
			},
			async topupAgain() {
				const {
					data
				} = await this.$u.post(this.$restUrl.getWXPayOptions, {
					task_code: this.taskCode,
					amount: this.orderDetail.price,
				})
				const res = await this.$wx.WXPay(data);
				this.$showToast('充值成功');
				this.getOrderDetail();
			},
			toTopup() {
				this.$u.route({
					url: '/pages/top_up/topUp',
					type: 'redirectTo'
				})
			},
			async toConsult() {
				const {
					data
				} = await this.$u.post(this.restUrl, {
					task_code: this.taskCode,
				})
				const session = {
					sessionId: data.groupid,
					sessionName: data.group_name,
					chatType: 'groupChat',
				}
				this.$u.route(`/pages_chat/chat_detail/chatDetail?sessionInfo=${encodeURIComponent(JSON
						.stringify(session))}`);

			},
			async toEvaluation() {
				const {
					data
				} = await this.$u.post(this.restUrl, {
					task_code: this.taskCode,
				})
				this.$u.route(`/pages_lawyer/lawyer_evaluation/lawyerEvaluation?taskCode=${data.task_code}&evaluateId=${data.evaluate_id}`)
			},
			placeOrderAgain() {

			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./orderDetail.scss";
</style>
